@charset "utf-8";

/* 右边主要内容区 */
.main-content{
    width:80%;
    height:1600px;
}
/* 轮播 */
.banner{
    height:600px;
    text-align:center;
}
.banner img{
    width:100%;
    height:600px;
}
/* 轮播分页器 */

.banner span{
  display:block;
  width:10px;
  height:10px;
  margin-top:8px;
  border-radius: 50%;
  
}
.banner span:nth-child(1){
    border:1px solid blue;
}
.banner span + span{
    border:1px solid  #444743;
    background-color: #444743;
}

/* 轮播的一层遮罩 */
.banner .opacity{
    top:0;
    background-color:rgba(0,0,0,.3);
}
.banner .opacity .opacity-content{
    width:60%;
    height:31%;
    margin:25% auto 0;
}
.banner .opacity ul li{
    display:inline-block;
    width:155px;
    height:45px;
    
    background-color:white;
    text-align:center;
    line-height:45px;
    letter-spacing:2px;
   
}
.banner .opacity ul li a{
    display:block;
    transition:.5s;
}
.banner .opacity ul li a:hover,
.banner .opacity ul li a.active{
     background-color: #279AAA;
     color:white;
}
/* 服务部分 */
.search,.recent-blog,.touch{
     width:97%;
}
.search{
    margin:5% 0 18% 3%;
}
.search h3,.recent-blog h3{
    font-weight:bold;
    letter-spacing:2px;
    color:transparent;
     background:linear-gradient(to right,red 1%,orange 4%,yellow 3%,skyblue 10%,white 15%);
     -webkit-background-clip:text;
}

.search .search-content li{
    display:inline-block;
    width:50%;
}
 .search-content i{
     display:inline-block;
     width:80px;
     height:80px;
     background-color:#F2EEDC;
     border-radius: 50%; 
     font-size:40px;
     color:#279AAA;
     text-align:center;
     line-height:80px;
     transition:2s;
 }
 .search-content li:hover i{
     transform:rotatey(180deg);
 }
 .search .search-content li > div{
    display:inline-block;
    width:77%;
    text-align:left;
 }
 .search-content h4,.recent-blog h4{
    letter-spacing:2px;
 }
 .search-content p{
     width:86%;
    color:gray;
 }
 /* recent blog部分*/
.recent-blog{
   margin:0 0 18% 3%;
    
}
.recent-blog li{
    
    float:left;
    width:24.25%;
    background-color:white;
    
}
.recent-blog li+li{
    margin-left:1%;
}
.recent-blog .text{
    width:calc(100% - 40px);
    padding:20px;
    background-color:white;
}
.recent-blog  li > a{
    overflow:hidden;
    display:block;
    width:100%;
    

    
}
.recent-blog a > img{
    width:100%;
    transform:scale(1.3);
    transition:1s;
   
}
.recent-blog li:hover img{
    transform:scale(1);
}


.recent-blog li h4,.recent-blog li em,
.recent-blog .text > a,
.touch a{
    text-transform:uppercase;
}
.recent-blog li em{
    color:rgba(0, 0, 0, 0.4);
    font-size:70%;
}
.recent-blog li p{
    margin:20px 0 20px 0 ;
    color:rgba(0, 0, 0, 0.5);
    font-weight:300;
    line-height:1.6;
}
.recent-blog .text > a{
    font-size:11px;
    letter-spacing:2px;
    color:#000;
}
.recent-blog .text > a i{
    vertical-align: middle;
}
/* touch部分 */
.touch{
    margin-left:3%;
}
.touch h3{
     background:linear-gradient(to right,red 5%,orange 15%,yellow 50%,skyblue 70%);
     -webkit-background-clip:text;
     color:transparent;
     font-size:30px;
}
.touch p{
    width:55%;
    color:rgba(0, 0, 0, 0.5);
}
.touch a{
    padding:10px;
    background-color:skyblue;
    color:#fff;
    letter-spacing:1px;
}

   /* portfolio部分 */
   .recent-blog li{
    width:48.5%;
   }



/* 响应式布局 */

@media screen and (max-width:800px){
    /* 轮播 */
    .banner{
        width:100%;
    }
    .pics{
        width:100%;
        height:100%;
    }
    .banner .opacity ul li{
        display:block;
        width:100%;
        margin-top:10px;
    }
    .banner .opacity ul li+li{
        margin-left:0;
    }
  
}

@media screen and (max-width:600px){
    /* 左侧导航栏 */
    .left-nav{
        display:none;
}
/* 右侧内容区 */
   .main-content{
        width:100%;
   }
    /* 轮播 */
    .banner{
        width:100%;
    }
    .pics{
        width:100%;
        height:100%;
    }
    .banner .opacity ul li{
        display:block;
        width:100%;
        margin-top:10px;
    }
    .banner .opacity ul li+li{
        margin-left:0;
    }
    /* search 部分 */
    .search .search-content li{
        width:100%;
        display:block;
    }
  
}







